<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>删除和替换</title>
	<style>
	body{
		text-align: center;
	}
	button{
		width:100px;
		height:50px;
		margin:10px;
	}
	</style>
	<script>
	window.onload = function(){
     //获取节点
     var img1 = document.getElementsByTagName("img");
     var oBtn1= document.getElementsByTagName("button")[0];
     var oBtn2= document.getElementsByTagName("button")[1];
     //alert(oBtn1);//检测节点是否被获取
     oBtn1.onclick = function(){
     	//删除节点
     	document.body.removeChild(img1[0]);
     }
     oBtn2.onclick = function(){
     	//创建一个新的元素节点
     	var span1 = document.createElement("span");
     	//更改内容
     	span1.innerHTML = "我是替换猕猴桃的文本内容";
     	//替换节点
     	document.body.replaceChild(span1,img1[0]);
        //改变属性
        span1.title = "我是HTML的全局属性-标题属性哦";
        //改变样式
        oBtn1.style.border = "5px solid red";
        oBtn2.style.backgroundColor = "green";
     }

	}//加载函数
	</script>
</head>
<body>
	<img src="mht.png" alt="猕猴桃"><br/>
	<img src="bl.png" alt="菠萝"><br/>
	<button>删除第一张</button><br/>
	<button>替换猕猴桃</button>
</body>
</html>